<template>
	<view class="order">
		<view class="nav">
			<view class="back" @click="goBack">
				<uni-icons type="back" :size="22" color="#333333"></uni-icons>
			</view>
			<view class="search-content" @click="handleToSearch">
				<image src="/static/index/search.png" mode=""></image>
				<input type="请输入" v-model="search" placeholder="请输入" placeholder-class="input-placeholder" />
				<view class="search-btn">搜索</view>
			</view>
			<view class="icon">
				<view @click="onScreen">
					<image src="/static/order/order_screen_icon.png"></image>
					<text>筛选</text>
				</view>
			</view>
		</view>


		<view class="tabbar">
			<view @click="onTab(0)" :id="status==0?'select':''">全部<i v-if="status == 0"></i></view>
			<view @click="onTab(2)" :id="status==2?'select':''">待接单<i v-if="status == 2"></i></view>
			<view @click="onTab(3)" :id="status==3?'select':''">进行中<i v-if="status == 3"></i></view>
			<view @click="onTab(4)" :id="status==4?'select':''">已完成<i v-if="status == 4"></i></view>
			<view @click="onTab(6)" :id="status==6?'select':''">退款/售后<i v-if="status == 6"></i></view>
		</view>
		
		<cc-pullScroolView class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index" @click="toContent(item)">
					<view class="name">
						<view class="logo">
							<image :src="item.service.category_image"></image>
							<text>{{item.service.category_name}}</text>
						</view>
						<view class="status">
							<text style="color: #EF4C28;" v-if="item.status==2 && item.sfter_sales <= 1 && item.return_status <= 1 && item.jiedan_time <= 0">待接单</text>
							<text style="color: #FFA126;" v-if="item.status==2 && item.sfter_sales <= 1 && item.return_status <= 1 && item.jiedan_time > 0">待开始</text>
							<text style="color: #2E7EFA;" v-if="item.status==3 && item.sfter_sales <= 1 && item.return_status <= 1">进行中</text>
							<text style="color: #6D6F6F;" v-if="item.status==4 && item.sfter_sales <= 1 && item.return_status <= 1">已完成</text>
							<text style="color: #6D6F6F;" v-if="item.status==5 && item.sfter_sales <= 1 && item.return_status <= 1">待评价</text>
							<text style="color: #6D6F6F;" v-if="item.status==6 && item.sfter_sales <= 1 && item.return_status <= 1">已评价</text>
							<text style="color: #EF4C28;" v-if="item.return_status==2">退款申请中</text>
							<text style="color: #EF4C28;" v-if="item.return_status==3">商家同意退款/平台待处理</text>
							<text style="color: #EF4C28;" v-if="item.return_status==4">已退款</text>
							<text style="color: #EF4C28;" v-if="item.sfter_sales == 2">已投诉</text>
							<text style="color: #EF4C28;" v-if="item.sfter_sales == 3">投诉已处理</text>
						</view>
					</view>
			
					<view class="product">
						<image :src="item.service.image" mode="aspectFill"></image>
						<view class="detail">
							<view class="title">{{item.service.category_name}}</view>
							<view class="text">下单时间：
								<uni-dateformat :date="item.pay_time*1000" format="yyyy/MM/dd hh:mm"></uni-dateformat>
							</view>
							<view class="text">用户：{{item.address.real_name}}</view>
							<view class="text">联系方式：{{item.address.mobile}}</view>
							<view class="text">服务地址：{{item.address.city}}{{item.address.district}}{{item.address.address}}</view>
							<view class="price">佣金收入
								<text> <i>¥ </i> {{item.pay_amount}}</text>
							</view>
						</view>
					</view>
			
					<view class="btn">
						<!-- 待接单 -->
						<view class="box" v-if="item.status==2 && item.return_status <= 1 && item.jiedan_time <= 0" @click.stop="getOrder(item.id)">
							<view style="border: 1rpx solid #F16344;color: #F16344;">立即接单</view>
						</view>
						<!-- 待开始 -->
						<!-- <view class="box" v-if="item.status==2 && item.return_status <= 1 && item.jiedan_time > 0" @click.stop="onSceen">
							<view class="flex_r_around" style="border: 1rpx solid #FFA126;color:#FFA126;"><uni-icons type="scan" :size="20" color="#FFA126"></uni-icons> 扫码开始</view>
						</view> -->
						<!-- 待结束 -->
						<!-- <view class="box" v-if="item.status==3 && item.return_status <= 1 && item.jiedan_time > 0" @click.stop="onComplant(item.id)">
							<view style="border: 1rpx solid #2E7EFA;color: #2E7EFA;">订单完成</view>
						</view> -->
					</view>
			
				</view>
			</view>
			<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="暂无订单" :width="161" :height="129" v-show="list.length == 0"></blankPage>
		</cc-pullScroolView>
		
		
		<uni-popup ref="search" :mask-click="false" type="right" background-color="#FFF">
			<view class="search">
				<view class="block">
					<view class="card" style="padding-top: 0;">
						<view class="title">订单号</view>
						<input type="text" placeholder="输入订单号" v-model="order_sn">
					</view>
					<view class="line"></view>
					<view class="card">
						<view class="title">订单状态</view>
						<view class="tag flex" style="flex-wrap: wrap;">
							<text :id="status == 2 ? 'select' : ''" @click="onStatus(2)">待接单</text>
							<text :id="status == 3 ? 'select' : ''" @click="onStatus(3)">进行中</text>
							<text :id="status == 4 ? 'select' : ''" @click="onStatus(4)">已完成</text>
							<text :id="status == 6 ? 'select' : ''" @click="onStatus(6)">退款/售后</text>
							<text :id="status == 0 ? 'select' : ''" @click="onStatus(0)">全部</text>
						</view>
					</view>
					<view class="line"></view>
					<view class="card">
						<view class="title">下单时间</view>
						<view class="time flex_r_around">
							<view class="date">
								<picker mode="date" @change="onStart">
									<view>{{start || '请选择'}}</view>
								</picker>
							</view>
							<text>—</text>
							<view class="date">
								<picker mode="date" @change="onEnd">
									<view>{{end || '请选择'}}</view>
								</picker>
							</view>
						</view>
					</view>
		
					
				</view>
				<view class="btnbox flex_r_between">
					<view class="btn btn1" @click="remove">重置</view>
					<view class="btn btn2" @click="onSelect">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<u-modal v-model="show" @confirm="confirm"
		ref="uModal" :async-close="false" title="确认接单" 
		content="接单后进行扫码，订单开始，同时开始打开手机录音，保证客户与技师的身体以及财务安全！"
		show-cancel-button
		:title-style="{
			'background':'#EAF2FE',
			color:'#2E7EFA',
			'font-weight':600,
			padding:'30rpx 0'
		}"
		:confirm-style="{
			'background':'#EAF2FE',
		}"
		></u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				status: 0,

				list: [],
				page:1,
				total:0,

				order_sn:'',
				start:'',
				end:'',
				jiedan:0,
				
				show:false,
			}
		},
		methods: {
			handleToSearch() {

			},
			onTab(e) {
				if(e==2 || e==0 || e==6){
					this.jiedan = 0
				}else {
					this.jiedan = 1
				}
				this.status = e
				this.page = 1
				this.list = []
				this.getList()
			},
			toOperation(e) {
				uni.navigateTo({
					url: '/otherpages/order/operation?status=' + e
				})
			},
			toContent(e) {
				uni.navigateTo({
					url: '/technician/order/orderContent?data=' + JSON.stringify(e)
				})
				
			},
			goBack() {
				uni.navigateBack()
			},
			
			onScreen(){
				this.$refs.search.open()
			},
			onSelect(){
				this.list = []
				this.page = 1
				this.getList()
				this.$refs.search.close()
			},
			getList(){
				this.request.httpTokenRequest({
					url: "technician.order/getMyOrderList",
					method: "get"
				}, {
					status:this.status,
					order_sn:this.order_sn,
					end_time:this.end,
					createtime:this.start,
					jiedan:this.jiedan
				}).then(res => {
					uni.hideLoading()
					this.$refs.pullScroll.success();
					if (res.code == 0) {
						this.total = res.data.total
						res.data.data.forEach(item=>{
							this.list.push(item)
						})
					} else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
			// 下拉刷新
			pullDown(pullScroll) {
				this.page = 1
				this.list = []
				uni.showLoading()
				this.getList()
			},
			
			
			onStatus(e) {
				this.status = e
			},
			onResult(e) {
				this.result = e
			},
			onStart(e) {
				this.start = e.detail.value
			},
			onEnd(e) {
				this.end = e.detail.value
			},
			remove(){
				this.order_sn = ''
				this.status = 0
				this.start = ''
				this.end = ''
				this.$refs.search.close()
			},
			getOrder(e){
				this.request.httpTokenRequest({
					url: "/technician.order/receivingOrders",
					method: "post"
				}, {
					order_id:e
				}).then(res => {
					this.$util.msg(res.msg)
					if (res.code == 0) {
						this.page = 1
						this.list = []
						this.getList()
					} else {
						
					}
				}, error => {})
			},
			confirm(){
				this.$util.scanCode(res=>{
					this.request.httpTokenRequest({
						url: "technician.order/scanOrderQr",
						method: "post"
					}, {
						order_id:res.result
					}).then(data => {
						this.show = false
						if (data.code == 0) {
							uni.reLaunch({
								url:'/technician/recorderManager/recorderManager?id=' + res.result
							})
						} else {
							this.$util.msg(data.msg)
						}
					}, error => {})
				})
			},
			onComplant(e){
				this.request.httpTokenRequest({
					url: "/technician.order/setOrderStatus",
					method: "post"
				}, {
					order_id:e,
					status:4
				}).then(res => {
					if (res.code == 0) {
						this.page = 1
						this.list = []
						this.getList()
					} else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
			onSceen(){
				this.show = true
			},
		},
		onShow(option) {
			this.list = []
			this.getList()
		},
		onReachBottom() {
			if(this.total > this.list.length){
				this.page++
				this.getList()
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.order {
		min-height: 100vh;
		background: #F5F7F8;
		padding: calc(var(--status-bar-height) + 70rpx) 0 114rpx;
		box-sizing: border-box;
	}

	.nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--status-bar-height) 30rpx 0;
		height: calc(var(--status-bar-height) + 70rpx);
		position: fixed;
		width: 100vw;
		top: 0;
		left: 0;
		background: #F5F7F8;
		z-index: 99;

		.search-content {
			width: 554rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 32rpx;
			border: 1rpx solid #2E7EFA;
			backdrop-filter: blur(10px);
			padding: 7rpx 10rpx 7rpx 23rpx;
			box-sizing: border-box;

			image {
				width: 30rpx;
				height: 30rpx;
				flex: 0 0 auto;
				margin-right: 20rpx;
			}

			.input-placeholder {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #AEAEB0;
				flex: 1;
			}

			.search-btn {
				width: 103rpx !important;
				height: 50rpx;
				background: #2E7EFA;
				border-radius: 32rpx;
				backdrop-filter: blur(10px);
				font-size: 26rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
				font-family: PingFangSC, PingFang SC;
			}
		}

		.icon {
			display: flex;
			align-items: center;

			view {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-left: 30rpx;

				image {
					width: 22rpx;
					height: 24rpx;
				}

				text {
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
				}
			}
		}
	}

	.tabbar {
		padding: 20rpx 32rpx 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			height: 39rpx;
			font-size: 30rpx;
			color: #08090A;
			line-height: 39rpx;
			position: relative;

			i {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 11rpx;
				background: rgba(46,126,250,0.6);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}

	.list {
		padding: 0 30rpx;

		.item {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.name {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.logo {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}

					text {
						font-size: 30rpx;
						color: #08090A;
						line-height: 42rpx;
					}
				}

				.status {
					font-size: 26rpx;
					line-height: 37rpx;
				}
			}

			.product {
				display: flex;
				margin: 30rpx 0 30rpx;

				image {
					width: 142rpx;
					height: 190rpx;
					margin-right: 23rpx;
				}

				.detail {
					flex: 1;

					.title {
						font-size: 28rpx;
						color: #656667;
						line-height: 40rpx;
					}

					.text {
						font-size: 24rpx;
						color: #656667;
						line-height: 33rpx;
						margin-top: 10rpx;
					}
					
					.price {
						text-align: right;
						font-size: 24rpx;
						color: #656667;
						line-height: 33rpx;
						margin-top: 20rpx;
						text {
							font-size: 30rpx;
							color: #EF5233;
							line-height: 33rpx;
							margin-left: 10rpx;
							i {
								font-size: 24rpx;
								font-style: normal;
							}
						}
					}
				}
			}

			.btn {
				.box {
					display: flex;
					flex-direction: row-reverse;
					align-items: center;

					view {
						width: 180rpx;
						height: 58rpx;
						border-radius: 29rpx;
						font-size: 28rpx;
						line-height: 58rpx;
						text-align: center;
						margin-left: 30rpx;
					}
				}
			}

		}
	}

	.search {
		width: 70vw;
		background: #FFFFFF;
		height: 100%;
		padding: 60rpx 0 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	
		.card {
			padding: 30rpx;
	
			input {
				width: 446rpx;
				height: 60rpx;
				background: #F5F6F7;
				border-radius: 40rpx;
				padding: 10rpx 27rpx;
				box-sizing: border-box;
				font-size: 28rpx;
			}
	
			.title {
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}
	
			.tag {
				text {
					width: 130rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 1rpx solid #D7D7D7;
					text-align: center;
					line-height: 60rpx;
					font-size: 24rpx;
					color: #000000;
					margin: 10rpx;
				}
	
				#select {
					background: rgba(46, 126, 250, 0.1);
					border: 1rpx solid #2E7EFA;
					color: #2F7CFC;
				}
			}
	
			.time {
				.date {
					width: 210rpx;
					height: 60rpx;
					background: #F3F3F3;
					border-radius: 30rpx;
					text-align: center;
					line-height: 60rpx;
	
					view {
						font-size: 24rpx;
						color: #000000;
					}
	
					text {
						color: #979797;
					}
				}
			}
		}
	
		.line {
			width: 100%;
			height: 30rpx;
			background: #D8D8D8;
			opacity: 0.5;
		}
	
		.btnbox {
			background: url(https://qiniu-cdn.maeiyun.com/imgs/technician/index/order_list_btn_bg.png) 0 0 no-repeat;
			background-size: 100%;
			width: 448rpx;
			height: 80rpx;
			margin: 30rpx auto;
			box-sizing: border-box;
	
			.btn {
				width: 50%;
				height: 76rpx;
				font-size: 30rpx;
				line-height: 76rpx;
				text-align: center;
			}
	
			.btn1 {
				color: #2F7CFC;
			}
	
			.btn2 {
				color: #FFFFFF;
			}
		}
	}

</style>